import React, { memo, ReactNode } from 'react';
import { LeftOutline } from 'antd-mobile-icons';
import classNames from 'classnames';
import { useGoTo, useMatchedRoute, useTitle } from '../../hooks/index.ts';
import style from './index.module.less';

interface IProps {
  children?: ReactNode
}

const Banner: React.FC<IProps> = () => {
  const route = useMatchedRoute();
  useTitle(route?.name as string);
  const { back } = useGoTo();

  const onClickHandler = () => {
    back();
  };
  if (route?.hideBanner) {
    return null;
  }
  return (
    <div className={classNames({
      [style.containerLarge]: route?.isMenu,
      [style.containerSmall]: !route?.isMenu,
    })}
    >
      { !route?.isMenu && (<LeftOutline className={style.back} onClick={onClickHandler} />) }
      <div className={style.title}>
        {route?.name}
      </div>
    </div>
  );
};

export default memo(Banner);
